<template>
    <div class="container">
        <oa-top-bar :title="title" :right-buttons="rightButtons" @rightActionClick="rightActionClick"/>
        <div class="content">
            <slot></slot>
        </div>
        <oa-tabbar :select="select"  :tabs="tabs" @tabItemClick="tabItemClick">

        </oa-tabbar>
    </div>
</template>

<script>
    import OaTabbar from "./oa-tabbar";
    import OaTopBar from "./oa-top-bar";

    export default {
        components: {
            OaTopBar,
            OaTabbar
        },
        name: "oa-tab-page",
        props: {
            title: {
                type: String,
                default: "首页"
            },
            rightButtons: {
                type: Array,
                default: function () {
                    return []
                }
            }
        },
        data() {
            return {
                select: 0,
            }
        },

        computed: {
            notice_number: function () {
                let notices = this.$store.state.notices;
                let number = 0
                notices.forEach((item) => {
                    if (!item.is_read) {
                        number++
                    }
                })
                return number;
            },
            tabs: function () {
                return [
                    {
                        label: "主页",
                        icon: 'icon-index',
                        link: "/",
                        show_tips:false,
                        number: 0
                    },
                    {
                        label: "通信录",
                        icon: 'icon-contact',
                        link: "/contact",
                        show_tips:false,
                        number: 0
                    },
                    {
                        label: "消息",
                        icon: "icon-message",
                        link: "/message",
                        show_tips:false,
                        number: this.$store.state.is_new_message ? this.notice_number : 0

                    },
                    {
                        label: "我",
                        icon: "icon-user-center",
                        link: "/me",
                        number: 0,
                        show_tips:this.$store.state.new_version
                    },

                ]
            }
        },
        mounted() {
            this.checkSelect()
        },
        methods: {
            rightActionClick(item, index) {
                this.$emit("rightActionClick", item, index)

            },
            tabItemClick(item, index) {
                this.select = index
                this.$router.push({
                    path: item.link
                })
            },
            checkSelect() {
                let index = 0;
                this.tabs.forEach((item) => {
                    if (item.link == this.$route.path) {
                        this.select = index
                    } else {
                        index++;
                    }
                })
            }
        }
    }
</script>

<style scoped lang="less">
    .container {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        .content {
            height: calc(~"100% - 51px - 45px");
            overflow-y: auto;
            -webkit-overflow-scrolling: touch
        }

    }
</style>